<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never" style="margin-top: -9px">
        <!-- 面包屑 -->
        <div class="bread" v-if="$route.query.id">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{ $route.query.name }}</el-breadcrumb-item>
            <el-breadcrumb-item>目录管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 搜索 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="searchRef">
          <el-form-item label="目录名称" prop="directoryName">
            <el-input v-model="formInline.directoryName"></el-input>
          </el-form-item>
          <el-form-item label="状态" style="margin-left: 50px" prop="state">
            <el-select v-model="formInline.state" placeholder="请选择">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="clear">清除</el-button>
            <el-button type="primary" size="small" @click="search(formInline.user)">搜索</el-button>
          </el-form-item>
          <el-form-item style="float: right">
            <el-button
              v-if="$route.query.id"
              type="text"
              icon="el-icon-back"
              @click="$router.push({ path: '/subjects/list' })"
              >返回学科</el-button
            >
            <el-button
              type="success"
              icon="el-icon-edit"
              size="small"
              @click="newlyadded"
              >新增目录</el-button
            >
          </el-form-item>
        </el-form>
        <!-- 提示 -->
        <!-- 1.先用el-row布局 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="margin-bottom: 15px"
        >
          <el-col :span="24">
            <div class="bg-purple-dark">
              <i class="el-icon-info" style="font-size: 16px"></i>
              数据一共{{ total }}条
            </div>
          </el-col>
        </el-row>
        <!-- 表格 -->
        <el-table
          :data="list"
          style="width: 100%"
          :header-cell-style="{ background: '#fafafa' }"
        >
          <el-table-column label="序号" type="index" width="80" />
          <el-table-column prop="subjectName" label="所属学科">
          </el-table-column>
          <el-table-column prop="directoryName" label="目录名称">
          </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column prop="addDate" label="创建日期" width="200">
            <!-- 自定义插槽 -->
            <template #default="{ row }">
              {{ dateFormat(row.timeOfEntry) }}
            </template>
          </el-table-column>
          <el-table-column prop="totals" label="面试题数量"> </el-table-column>
          <el-table-column prop="state" label="状态">
            <template #default="{ row }">
              {{ row.state === 1 ? "已启动" : "已禁用" }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button type="text" @click="startover(row.id,row.state)">{{ !row.state ? '启用':"禁用"  }}</el-button>
              <el-button type="text" :disabled="!!row.state" @click="rework(row.id)">修改</el-button>
              <el-button type="text" :disabled="!!row.state" @click="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-row
          type="flex"
          justify="end"
          align="middle"
          style="margin-top: 20px"
        >
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="params.page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="params.pagesize"
            layout="prev, pager, next, sizes, jumper"
            :total="total"
            background
          >
          </el-pagination>
        </el-row>
      </el-card>
    </div>
    <!-- 弹窗 -->
    <el-dialog
      :title="addForm.id?'修改目录':'新增目录'"
      :visible="dialogVisible"
      width="30%"
      @close="closeDialog"
    >
      <!-- 表单内容-有id -->
      <el-form
        :model="addForm"
        :rules="addRules"
        ref="RefForm"
        label-width="80px"
        class="demo-ruleForm"
        v-if="$route.query.id"
      >
        <el-form-item label="目录名称" prop="directoryName">
          <el-input
            v-model="addForm.directoryName"
            placeholder="请输入目录名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 表单内容 -没有id-->
      <el-form
        :model="addForm"
        :rules="addRules"
        ref="RefForm"
        label-width="80px"
        class="demo-ruleForm"
        v-else
      >
        <el-form-item label="所属学科" prop="subjectID">
          <el-select
            v-model="addForm.subjectID"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="(item, index) in subjeck"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName">
          <el-input
            v-model="addForm.directoryName"
            placeholder="请输入目录名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, remove, detail, update, changeState } from '@/api/hmmm/directorys'
import { simple } from '@/api/hmmm/subjects.js'
import dayjs from 'dayjs'
export default {
  data () {
    return {
      // 表格数据
      list: [],
      // 标题数据
      formInline: {
        // user: '',
        // region: ''
        // user: undefined,
        // region: undefined
        directoryName: undefined, // 目录名称
        state: undefined // 状态
      },
      // 分页参数
      params: {
        page: 1,
        pagesize: 10
      },
      // 总条数
      total: 0,
      // 控制弹窗显示与隐藏字段
      dialogVisible: false,
      // 表单数据对象
      addForm: {
        directoryName: '', // 目录名称
        subjectID: this.$route.query.id ? Number(this.$route.query.id) : ''// 所属学科id
      },
      // 表单验证规则对象
      addRules: {
        subjectID: [
          { required: true, message: '请选择所属学科', trigger: 'blur' }
        ],
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      // 学科
      subjeck: []
    }
  },
  methods: {
    // 获取列表数据
    async getlist () {
      const res = await list({
        ...this.params,
        ...this.formInline,
        subjectID: this.$route.query.id
      })
      // console.log(res)
      this.list = res.data.items
      this.total = res.data.counts
    },
    // 分页器和内容联动
    handleCurrentChange (newPage) {
      // console.log(newPage);
      this.params.page = newPage
      this.getlist()
    },
    // 时间转换
    dateFormat (str) {
      return dayjs(str).format('YYYY-MM-DD HH:mm:ss')
    },
    // 点击新增目录-打开弹窗
    newlyadded () {
      this.dialogVisible = true
    },
    // 关闭x和蒙版
    closeDialog () {
      this.dialogVisible = false
      // 清空表单内容，并移除校验结果
      this.$refs.RefForm.resetFields()
      // // 手动清空表单数据
      this.addForm = {
        directoryName: '',
        subjectID: ''
      }
    },
    // 点击清除按钮 清空标题数据
    clear () {
      // this.formInline = {
      //   directoryName: undefined, // 目录名称
      //   state: undefined // 状态
      // }

      this.$refs.searchRef.resetFields()
    },
    // 点击搜索按钮,完成功能
    async search (value) {
      // if (this.formInline.user === '') {
      //   this.getlist()
      // } els
      // }
      // console.log(this.subjeck)
      this.params.page = 1
      this.getlist()
    },
    // 获取所有学科
    async getsubjeck () {
      const res = await simple()
      // console.log(res)
      // 将服务器响应的学科数据赋值给subjeck
      this.subjeck = res.data
    },
    // 点击确认按钮,完成新增
    submit () {
      //  兜底校验
      this.$refs.RefForm.validate(async (valid) => {
        if (!valid) return
        // 校验通过
        // 判断是添加还是修改
        if (this.addForm.id) {
          // 修改
          // console.log(123)
          await update(this.addForm)
        } else {
          // 新增
          // console.log(456)
          await add(this.addForm)
        }
        // 提示用户
        // 发请求
        // await add({
        //   subjectID: this.addForm.directoryName, // 所属学科
        //   directoryName: this.addForm.subjectName // 目录名称
        // })
        const msg = this.addForm.id ? '修改成功' : '添加成功'
        this.$message.success(msg)
        // 关闭弹窗
        this.dialogVisible = false
        // 刷新数据
        this.getlist()
      })
    },
    // 删除功能
    delFn (id) {
      // console.log(id)
      // 询问用户
      this.$confirm('此操作将永久删除吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 发起删除请求
        await remove({ id })
        // 提示用户
        this.$message.success('删除成功')
        // 刷新表格数据
        this.getlist()
      })
    },
    // 点击修改按钮-弹窗打开
    async rework (id) {
      // console.log(id)
      this.dialogVisible = true
      // 调接口
      const res = await detail({ id })
      // console.log(res)
      this.addForm = res.data
    },
    // 状态功能
    async startover (id, state) {
      // console.log(123)
      // console.log(id, state)
      if (state === 1) {
        // 重置表单
        this.$refs.searchRef.resetFields()
        // 调接口
        await changeState({
          state: 0,
          id
        })
      } else {
        // 重置表单
        this.$refs.searchRef.resetFields()
        // 调接口
        await changeState({
          state: 1,
          id
        })
      }
      // 提示框
      this.$message.success('操作成功')
      // 刷新列表
      this.getlist()
    }
  },
  created () {
    this.getlist()
    this.getsubjeck()
    // console.log(this.$route.query.id)
  }
}
</script>

<style scoped>
.bg-purple-dark {
  padding: 8px 16px;
  border-radius: 4px;
  background-color: #f4f4f5;
  font-size: 13px;
  color: #909399;
}
.bread {

  height: 40px;
  margin-left: -38px;
}
</style>
